<template>
    <div id="Popover">
        <el-tag
            :key="tag.MyPK"
            v-for="(tag,index) in tagData"
            closable
            :disable-transitions="false"
            @close="handleClose(tag.MyPK,index)">
            {{tag.Tag2}}
        </el-tag>
        <el-button  class="button-new-tag" size="small" @click="showPopover">选择目标数据</el-button>
        <el-dialog :title="title" :visible.sync="showDialog">
            <component
                :is="currentView"
                :mapExt="mapExt"
                :selectRow="selectRow"
                @on-selectRow-change="selectRowChange"
                :width="width"
                :style="{height:height+'px'}">
            </component>

            <div slot="footer" class="dialog-footer">
                <el-button @click="showDialog=false">取 消</el-button>
                <el-button type="primary" @click="BtnOK">确 定</el-button>
            </div>

        </el-dialog>
    </div>
</template>

<script>
    import BranchesAndLeaf from './BranchesAndLeaf.vue';
    import Branches from './Branches.vue';
    import Table from './Table.vue';
    import Group from './Group.vue';
    import {GetPara} from "../../../api/Gener.js";
    export default {
        name: "Popover",
        props:{
            mapExts:{
                type:Array,
            },
            popModel:{
                type:String
            }
        },
        components:{
            BranchesAndLeaf,
            Branches,
            Group,
            Table,

        },
        data(){
            return{
                params:{},
                webUser:{},
                mapExt:{},
                tagData:[],
                showDialog:false,
                title:"",
                width:'80%',
                height:500,
                selectRow:[],
                currentView:""//当前的组件

            }
        },
        created(){
            this.params=this.$store.getters.getData;
            this.title=GetPara(this.mapExt.AtPara,"Title");
            this.height=document.documentElement.clientHeight*0.65;
            this.mapExt = this.mapExts[0];
            let frmEleDBs = new this.Entities("BP.Sys.FrmEleDBs");
            frmEleDBs.Retrieve("FK_MapData", this.mapExt.FK_MapData, "EleID", this.mapExt.AttrOfOper, "RefPKVal",this.params.WorkID);
            let _this=this;
            this.$.each(frmEleDBs,function(i,item){
                this.selectVal +=item.Tag2+",";
                _this.tagData.push({
                    MyPK:item.MyPK,
                    Tag1:item.Tag1,
                    Tag2:item.Tag2
                });
                _this.selectRow.push({
                    No:item.Tag1,
                    Name:item.Tag2
                });
            });
        },
        methods:{
            showPopover(){
                this.width="80%";
                if(this.popModel == 'PopBranchesAndLeaf')
                    this.currentView="BranchesAndLeaf";
                if(this.popModel == 'PopBranches'){
                    this.width="50%";
                    this.currentView="Branches";
                }
                if(this.popModel == 'PopTableSearch')
                    this.currentView="Table";
                this.selectRow=[];
                this.tagData.forEach(item=>{
                    this.selectRow.push({
                        No:item.Tag1,
                        Name:item.Tag2
                    });
                });
                this.showDialog=true;

            },
            handleClose(myPK,index){
                this.tagData.splice(index, 1);
                this.selectRow.splice(index,1);
                //删除存储的数据
                let frmEleDB = new this.Entity("BP.Sys.FrmEleDB");
                frmEleDB.MyPK = myPK;
                frmEleDB.Delete();
            },
            BtnOK(){
                if(this.selectRow.length==0){
                    this.$message.warning("至少选择一条数据");
                    return;
                }
                //先删除之前选择的数据
                let frmEleDBs = new this.Entities("BP.Sys.FrmEleDBs");
                frmEleDBs.Delete("FK_MapData", this.mapExt.FK_MapData, "EleID", this.mapExt.AttrOfOper, "RefPKVal", this.params.WorkID);
                this.tagData=[];
                //增加选择的数据
                this.selectRow.forEach(item=>{
                    let frmEleDB = new this.Entity("BP.Sys.FrmEleDB");
                    frmEleDB.MyPK = this.mapExt.AttrOfOper + "_" + this.params.WorkID + "_" + item.No;
                    frmEleDB.FK_MapData = this.mapExt.FK_MapData;
                    frmEleDB.EleID = this.mapExt.AttrOfOper;
                    frmEleDB.RefPKVal = this.params.WorkID;
                    frmEleDB.Tag1 = item.No;
                    frmEleDB.Tag2 = item.Name;
                    frmEleDB.Insert();

                    this.tagData.push({
                        MyPK:frmEleDB.MyPK,
                        Tag1:frmEleDB.Tag1,
                        Tag2:frmEleDB.Tag2
                    })
                });
                this.showDialog=false;

            },
            selectRowChange(value){
                this.selectRow=value;
            }
        }

    }
</script>

<style scoped>
    /deep/.el-tag + .el-tag {
        margin-left: 10px;
    }
   /deep/ .button-new-tag {
        margin-left: 10px;
        height: 32px;
        line-height: 30px;
        padding-top: 0;
        padding-bottom: 0;
    }
    /deep/ .el-dialog__body{
        padding: 10px 20px;
    }
    /deep/ .el-dialog {
        min-height: 80%;
    }
</style>